<template>
  <div class=" deal-info adopting">
    <uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar left-icon="left"
      title="详情" @clickLeft="$ui.back()" />
    <view style="padding: 20rpx;">
      <div class="deal-info-top-div div-position">
        <div class="deal-info-upload-ts" v-if="type == 'buy' && purchase.status == 1">
          <div class="deal-info-h1">
            请付款
          </div>
          <div class="deal-info-tag">
            您已抢购成功 请及时付款
          </div>
          <div class="vant-btn">
            <div class="flex-between-center deal-right-top">
              <image src="../../../assets/mine/deal-time.png" class="deal-right-img" mode=""></image>
              <span>剩余时间</span>
            </div>
            <div class="deal-right-time">
              {{ userInfo.hour | fixTime }}:{{ userInfo.minute | fixTime }}:{{ userInfo.second | fixTime }}
            </div>
          </div>
        </div>
        <div v-if="type == 'buy' && purchase.status == 2" class="deal-info-upload-ts">
          <div class="deal-info-h1">
            等待确认
          </div>
          <div class="deal-info-tag">
            请耐心等待对方确认
          </div>
          <div class="vant-btn">
            <div class="flex-between-center deal-right-top">
              <image src="../../../assets/mine/deal-time.png" class="deal-right-img" mode=""></image>
              <span>剩余时间</span>
            </div>
            <div class="deal-right-time">
              {{ userInfo.hour | fixTime }}:{{ userInfo.minute | fixTime }}:{{ userInfo.second | fixTime }}
            </div>
          </div>
        </div>
        <div v-if="type == 'sell' && purchase.status == 1" class="deal-info-upload-ts">
          <div class="deal-info-h1">
            等待对方付款
          </div>
          <div class="deal-info-tag">
            买方即将付款
          </div>
          <div class="vant-btn">
            <div class="flex-between-center deal-right-top">
              <image src="../../../assets/mine/deal-time.png" class="deal-right-img" mode=""></image>
              <span>剩余时间</span>
            </div>
            <div class="deal-right-time">
              {{ userInfo.hour | fixTime }}:{{ userInfo.minute | fixTime }}:{{ userInfo.second | fixTime }}
            </div>
          </div>
        </div>
        <div v-if="type == 'sell' && purchase.status == 2" class="deal-info-upload-ts">
          <div class="deal-info-h1">
            请确认收款
          </div>
          <div class="deal-info-tag">
            买方已上传支付凭证
          </div>
          <div class="vant-btn">
            <div class="flex-between-center deal-right-top">
              <image src="../../../assets/mine/deal-time.png" class="deal-right-img" mode=""></image>
              <span>剩余时间</span>
            </div>
            <div class="deal-right-time">
              {{ userInfo.hour | fixTime }}:{{ userInfo.minute | fixTime }}:{{ userInfo.second | fixTime }}
            </div>
          </div>
        </div>
      </div>
      <div class="deal-info-div div-position div-sizing">
        <!-- 交易信息 -->
        <div class="deal-info-content">
          <div class="deal-con-top">
            <div class="flex-between-center deal-top-pet div-sizing">
              <div class="flex-between-center deal-pet-left">
                <img :src="purchase.logo" alt="" class="deal-pet-img">
                <div class="">
                  <div class="deal-pet-left-info">
                    <div class="deal-pet-title">
                      名称
                    </div>
                    <div class="deal-pet-name van-ellipsis">
                      {{ purchase.name }}
                    </div>
                  </div>
                  <div class="deal-pet-left-info">
                    <div class="deal-pet-title">
                      收益率
                    </div>
                    <div class="deal-pet-name">
                      {{ purchase.rate }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="flex-between-center deal-pet-right">
                <div v-if="type == 'buy'" class="pet-right-title">
                  请向对方账户付款
                </div>
                <div v-if="type == 'sell'" class="pet-right-title">
                  对方向您付款
                </div>
                <div class="pet-right-price font-family-din">
                  ￥{{ purchase.price }}
                </div>
              </div>
            </div>
            <div v-if="type == 'buy' && purchase.status == 1" class="flex-between-center deal-top-pay div-sizing">
              <div class="flex-between-center deal-top-pay-left">
                <img :src="payList[realActive-1].src" alt="" class="pay-img">
                <span>{{ payList[realActive-1].name }}</span>
              </div>
              <div class="flex-between-center deal-top-pay-right" @click="changePay">
                <span>切换方式</span>
                <u-icon name="arrow-right" />
              </div>
            </div>
          </div>
          <div v-if="type == 'buy' && purchase.status == 1" class="deal-con-center div-sizing">
            <div v-for="(item,index) in receive" :key="index" class="">
              <div v-if="realActive == parseInt(index)">
                <div v-if="realActive !== 3 && realActive != 4" class="flex-between-center deal-center-line">
                  <div class="">
                    {{ index | fixCode }}：{{ item.account_num }}
                  </div>
                  <div class="vant-btn vant-btn-copy div-sizing">
                    <u-button @click="copyBtn(item.account_num)">
                      复制
                    </u-button>
                  </div>
                </div>
                <div v-if="realActive !== 3 && realActive != 4" class="flex-between-center deal-center-line">
                  <div class="">
                    {{ index | fixPayName }}：{{ item.name }}
                  </div>
                  <div class="vant-btn vant-btn-copy div-sizing">
                    <u-button @click="copyBtn(item.name)">
                      复制
                    </u-button>
                  </div>
                </div>
                <div v-if="realActive == 3" class="flex-between-center deal-center-line">
                  <div class="">
                    开户行：{{ item.account_num }}
                  </div>
                  <div class="vant-btn vant-btn-copy div-sizing">
                    <u-button @click="copyBtn(item.account_num)">
                      复制
                    </u-button>
                  </div>
                </div>
                <div v-if="realActive == 3" class="flex-between-center deal-center-line">
                  <div class="">
                    银行卡号：{{ item.bank_num }}
                  </div>
                  <div class="vant-btn vant-btn-copy div-sizing">
                    <u-button @click="copyBtn(item.bank_num)">
                      复制
                    </u-button>
                  </div>
                </div>
                <div v-if="realActive == 3" class="flex-between-center deal-center-line">
                  <div class="">
                    收款人：{{ item.name }}
                  </div>
                  <div class="vant-btn vant-btn-copy div-sizing">
                    <u-button @click="copyBtn(item.name)">
                      复制
                    </u-button>
                  </div>
                </div>
                <div v-if="realActive !== 3 && realActive != 4" class="flex-between-center deal-pay-img-div">
                  <div class="deal-pay-content">
                    <img :src="item.receive_qrcode" alt="" class="deal-pay-img img-s-h" @click="blowImg('code')">
                  </div>
                </div>
                <div v-if="realActive == 4" class="flex-between-center deal-pay-usdt">
                  <div class="deal-pay-content">
                    <img :src="item.receive_qrcode" alt="" class="deal-pay-img img-s-h" @click="blowImg('usdt')">
                  </div>
                  <!-- <div class="usdt-btn">
                保存二维码至相册
              </div> -->
                  <div class="usdt-title">
                    充币地址
                  </div>
                  <div class="usdt-url">
                    {{ item.account_num }}
                  </div>
                  <div class="vant-btn vant-btn-copy div-sizing">
                    <u-button @click="copyBtn(item.account_num)">
                      复制
                    </u-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else-if="purchase.status == 2" class="deal-con-center div-sizing">
            <div v-if="realActive !== 3" class="flex-between-center deal-pay-img-div">
              <div class="deal-pay-content">
                <img :src="voucher" alt="" class="deal-pay-img img-s-h" @click="blowImg('voucher')">
              </div>
            </div>
          </div>
          <div class="vant-btn deal-con-btm div-sizing">
            <div v-if="realActive != 4" class="deal-tag">
              提示：付款时请不要备注任何信息，推荐使用支付宝，银行卡号转账
            </div>
            <div v-else class="deal-tag">
              <div>提示：请勿向上述地址充值任何非 TRC-20资产，否则资产将不可找回。</div>
              <div>您转账至上述地址后，需要整个网络节点的确认，12次网络确认后到账，12次网络确认后可提币。</div>
              <div>最小转账金额：1 USDT，小于最小金额的转账将不会上账且无法退回。</div>
              <div>您的转账地址不会经常改变，可以重复转账；如有更改，我们会尽量通过网站公告或邮件通知您。</div>
              <div>请务必确认手机网络安全，防止信息被篡改或泄露。</div>
            </div>
            <!-- 未上传凭证 买家确认上传凭证 -->
            <u-button v-if="type == 'buy' && purchase.status == 1" @click="uploadShow = true">
              上传支付凭证
            </u-button>
            <!-- 上传凭证后 卖家确认 -->
            <div v-else-if="type == 'sell' && purchase.status == 2" class="flex-between-center">
              <u-button class="u-button-ss" @click="$router.push({path:'/bAppeal',query:{id:id,type:'pet'}})">
                申诉
              </u-button>
              <u-button @click="verifyReceipt">
                确认支付凭证
              </u-button>
            </div>
            <!-- 未上传凭证 卖家等待对方上传凭证 -->
            <u-button v-else-if="type == 'sell' && purchase.status == 1" class="u-button-wait">
              等待对方上传凭证
            </u-button>
            <!-- 买家等待对确认 -->
            <u-button v-else-if="type == 'buy' && purchase.status == 2" class="u-button-wait">
              等待对方确认
            </u-button>
          </div>
        </div>

        <!-- 交易用户信息 -->
        <div class="deal-user-info-div div-position">
          <div v-if="type == 'buy'" class="flex-between-center deal-user-line">
            <div class="flex-between-center deal-user-line-left">
              <img src="@/assets/mine/info-zzf.png" alt="" class="deal-user-img">
              <span>卖方</span>
            </div>
            <div class="flex-between-center deal-user-line-right">
              <span>{{ userInfo.tel }}</span>
              <a :href="'tel:'+userInfo.tel"><img src="@/assets/mine/deal-phone.png" alt="" class="deal-user-img"></a>
            </div>
          </div>
          <div v-if="type == 'sell'" class="flex-between-center deal-user-line">
            <div class="flex-between-center deal-user-line-left">
              <img src="@/assets/mine/info-zlf.png" alt="" class="deal-user-img">
              <span>买方</span>
            </div>
            <div class="flex-between-center deal-user-line-right">
              <span>{{ userInfo.tel }}</span>
              <a :href="'tel:'+userInfo.tel"><img src="@/assets/mine/deal-phone.png" alt="" class="deal-user-img"></a>
            </div>
          </div>
          <div class="flex-between-center deal-user-line">
            <div class="flex-between-center deal-user-line-left">
              <img src="@/assets/mine/info-jjlxr.png" alt="" class="deal-user-img">
              <span>紧急联系人</span>
            </div>
            <div class="flex-between-center deal-user-line-right">
              <span>{{ userInfo.urgent_tel }}</span>
              <a :href="'tel:'+userInfo.urgent_tel"><img src="@/assets/mine/deal-phone.png" alt=""
                  class="deal-user-img"></a>
            </div>
          </div>
        </div>

        <!-- 图片放大组件 -->
        <!-- <van-image-preview v-model="show" :images="images" :show-index="false" :closeable="true" swipe-duration="100" /> -->

        <!-- 上传凭证 -->
        <u-popup :round="10" :show="uploadShow">
          <div class="upload-popup-div">
            <u-upload width="250" height="250" uploadIcon="plus" uploadText='点击上传支付凭证'
              :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1">
            </u-upload>
            <view class="text">点击上传支付凭证</view>
            <!-- <van-uploader :max-count="1" class="camera-btm-div div-sizing" :after-read="afterRead">
              <div class="flex-between-center pz-img-div div-sizing">
                <img src="@/assets/deal/pz-img.png" alt="" class="pz-none">
                <span>点击上传支付凭证</span>
                <img :src="voucherY" alt="" class="pz-img img-s-h" @click.stop="blowImg('voucher')">
              </div>
            </van-uploader> -->
            <view class="flex-between-center upload-popup-btn">
              <view class="upload-close" @click="uploadShow = false">
                取消
              </view>
              <view class="upload-sure" @click="submitVoucher">
                确认
              </view>
            </view>
          </div>
        </u-popup>
      </div>
      <!-- 选择支付方式 -->
      <u-popup :show="showBottom" mode="bottom">
        <div class="popup-div">
          <div class="flex-between-center pop-top div-sizing">
            <div class="pop-close" @click="closeAc">
              取消
            </div>
            <div class="pop-title">
              请选择支付方式
            </div>
            <div class="pop-sure" @click="sureAc">
              确定
            </div>
          </div>
          <div class="pop-pay-list div-sizing">
            <div v-for="(item,index) in receive" :key="index" class="flex-between-center pop-pay-item"
              @click="changeAc(index)">
              <div class="flex-between-center pop-pay-left">
                <img :src="payList[index-1].src" alt="" class="pop-pay-img">
                <span>{{ payList[index-1].name }}</span>
              </div>
              <u-icon name="checkbox-mark" v-show="active == index"></u-icon>
            </div>
          </div>
        </div>
      </u-popup>
    </view>

  </div>
</template>

<script>
  import {
    uploadVoucherIndex,
    uploadVoucher,
    submitConfirmOrder,
    putConfirmOrderIndex
  } from '@/api/mAdoptingRecord.js'
  import {
    url_config
  } from '@/common/config.js'
  export default {
    filters: {
      fixType(type) {
        return type === 'buy' ? '卖家' : '买家'
      },
      fixPayName(index) {
        index = parseInt(index)
        return index === 1 ? '支付宝姓名：' : index === 2 ? '微信昵称：' : index === 3 ? '持卡人姓名：' : ''
      },
      fixCode(index) {
        index = parseInt(index)
        return index === 1 ? '支付宝账号：' : index === 3 ? '银行卡号：' : index === 2 ? '微信账号：' : ''
      },
      fixReceive(index) {
        index = parseInt(index)
        return index === 1 ? '支付宝收款码：' : index === 2 ? '微信收款码：' : ''
      },
      fixTime(value) {
        return value < 10 ? '0' + value : value
      }
    },
    data() {
      return {
        fileList1: [],
        id: '',
        type: 'buy', // 自己的类型 'sell'卖方 'buy'买方
        show: false, // 放大图片组件显示
        images: [], // 放大的图片数组
        active: 1, // 实时选择支付方式下标
        realActive: '1', // 确认选择支付方式下标
        showBottom: false,
        payList: [{
          src: require('@/assets/deal/alipay.png'),
          name: '支付宝'
        }, {
          src: require('@/assets/deal/wechat.png'),
          name: '微信'
        }, {
          src: require('@/assets/deal/bank.png'),
          name: '银行卡'
        }, {
          src: require('@/assets/deal/usdt.png'),
          name: 'USDT'
        }],
        purchase: {}, // 宠物信息
        userInfo: {}, // 对方用户信息
        receive: [], // 支付方式
        voucher: '', // 凭证
        voucherY: '', // 预览路径
        uploadShow: false,
        status: 0
      }
    },
    onLoad(opt) {
      this.id = opt.id
      this.status = parseInt(opt.status)
      if (!this.id) {
        this.$ui.toast('参数错误')
      } else {
        this.get_info()
      }
    },
    beforeDestroy() {
      clearInterval()
      this.purchase = null
    },
    methods: {
      // 渲染
      get_info() {
        if (this.status === 2) {
          putConfirmOrderIndex({
            id: this.id
          }).then(res => {
            if (res.code === 1) {
              this.dataPro(res)
            } else {
              this.$router.go(-1)
            }
          })
        } else {
          uploadVoucherIndex({
            id: this.id
          }).then(res => {
            if (res.code === 1) {
              this.dataPro(res)
            } else {
              this.$router.go(-1)
            }
          })
        }
      },
      transformTime(seconds) {
        if (seconds !== 0) {
          const hour = Math.floor(seconds / Math.pow(60, 2))
          // 计算剩余秒数
          const j = seconds % Math.pow(60, 2)
          // 计算剩余分钟
          const minute = Math.floor(j / 60)
          // 剩余秒数
          const second = j % 60
          return {
            hour,
            minute,
            second
          }
        } else {
          return {
            hour: 0,
            minute: 0,
            second: 0
          }
        }
      },
      // 数据处理
      dataPro(res) {
        this.type = res.data.status
        this.purchase = res.data.purchase
        const userInfo = res.data.userInfo
        // if (userInfo.deal_time !== 0) {
        const timeObj = this.transformTime(userInfo.deal_time)
        userInfo.hour = timeObj.hour
        userInfo.minute = timeObj.minute
        userInfo.second = timeObj.second
        if (userInfo.deal_time !== 0) {
          userInfo.setTime = setInterval(() => {
            if (userInfo.second !== 0) {
              userInfo.second--
            } else if (userInfo.minute !== 0) {
              userInfo.minute--
              userInfo.second = 59
            } else if (userInfo.hour !== 0) {
              userInfo.hour--
              userInfo.minute = 59
              userInfo.second = 59
            } else {
              clearInterval(userInfo.setTime)
              this.get_info()
            }
          }, 1000)
        }
        // }
        this.userInfo = userInfo
        this.receive = res.data.receive
        this.voucher = res.data.voucher
        this.voucherY = this.voucher
        if (this.receive && this.receive.length !== 0) {
          for (const i in this.receive) {
            this.realActive = parseInt(i)
            this.active = parseInt(i)
            break
          }
          this.images[0] = this.receive['' + this.realActive].receive_qrcode
        }
      },
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
        lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          console.log(result, 1231456789);
          if (result.code == 1) {
            this.voucher = result.url
          } else {
            this.$ui.toast('上传失败')
          }
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          fileListLen++
        }
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: `${url_config}/api/upload/uploads`, // 仅为示例，非真实的接口地址
            filePath: url,
            name: 'file',
            formData: {
              user: 'test'
            },
            success: (res) => {
              const date = JSON.stringify(res.data)
              setTimeout(() => {
                resolve(JSON.parse(res.data))
              }, 1000)
            }
          });
        })
      },
      // 点击放大图片
      blowImg(type) {
        if (type === 'code') {
          this.images[0] = this.receive['' + this.realActive].receive_qrcode
        } else if (type === 'usdt') {
          this.images[0] = this.receive['' + this.realActive].receive_qrcode
        } else {
          this.images[0] = this.voucherY
        }
        this.show = true
      },
      // 买家确认上传凭证
      submitVoucher() {
        if (this.voucher == '') {
          this.$ui.toast('请上传支付凭证')
        } else {
          uploadVoucher({
            id: this.id,
            voucher: this.voucher
          }).then(res => {
            if (res.code === 1) {
              this.$ui.toast('上传成功，等待对方确认')
              this.uploadShow = false
              // this.get_info()
              this.$router.go(-1)
            }
          })
        }
      },
      // 卖家确认收款
      verifyReceipt() {
        this.$dialog.confirm({
            title: '提示',
            message: '确认到账？'
          })
          .then(() => {
            submitConfirmOrder({
              id: this.id
            }).then(res => {
              if (res.code === 1) {
                this.$ui.toast(res.msg)
                // this.get_info()
                this.$router.go(-1)
              }
            })
          })
      },
      // 选择支付方式
      changePay() {
        this.showBottom = true
      },
      // 点击支付方式选中
      changeAc(index) {
        this.active = parseInt(index)
      },
      // 关闭选择
      closeAc() {
        this.active = this.realActive
        this.showBottom = false
      },
      // 确定更换支付方式
      sureAc() {
        this.realActive = this.active
        this.images[0] = this.receive['' + this.realActive].receive_qrcode
        this.closeAc()
      },
      // 复制成功时的回调函数
      copyBtn(value) {
        uni.setClipboardData({
          data: value, //要被复制的内容
          success: () => { //复制成功的回调函数
            uni.showToast({ //提示
              title: '复制成功'
            })
          }
        });
      },
      // 复制失败时的回调函数
      onError(e) {
        this.$ui.toast.error('抱歉，复制失败！')
      }
    }
  }
</script>

<style lang="less" scoped>
  .deal-info {
    padding: 0rpx 0rpx 98rpx;
    position: relative;
    background: #f9f9f9;

    // background: linear-gradient(90deg,#2772F0,#248FEE);
    // background: -moz-linear-gradient(90deg,#2772F0,#248FEE);
    // background: -o-linear-gradient(90deg,#2772F0,#248FEE);
    // background: -webkit-linear-gradient(90deg,#2772F0,#248FEE);
    // background: url(~assets/mine/deal-info-bg.png) no-repeat;
    // background-size: 100% 100%;
    // & div,& img, & span{
    //   z-index:3;
    //   position: relative;
    // }
    .div-position {
      z-index: 3;
      position: relative;
    }

    .deal-top-img {
      width: 100%;
      height: auto;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    // 头部
    .deal-info-header {
      width: 100%;
      height: 2rem;
      line-height: 1.3rem;
      position: fixed;
      top: 0;
      padding: 0.7rem 0 0;
      z-index: 3;

      .deal-info-left {
        font-size: 32rpx;
        color: #ffffff;
      }
    }

    .deal-info-top-div {
      min-height: 168rpx;
      padding: 34rpx 20rpx;
      margin-bottom: 24rpx;
      box-sizing: border-box;
      background: #4dd782a3;
      border-radius: 20rpx;

      .deal-info-upload-ts {
        // padding: 0 0 30rpx;
        position: relative;
        // background: #1A5AC5;
        border-radius: 20rpx;

        .deal-info-h1 {
          font-size: 48rpx;
          font-weight: bold;
          line-height: 66rpx;
          margin-bottom: 16rpx;
          color: rgba(#ffffff, 1);
        }

        .deal-info-tag {
          font-size: 24rpx;
          color: rgba(#ffffff, 0.65);
        }

        .vant-btn {
          position: absolute;
          right: 0;
          bottom: 0;
          margin: 0;
          overflow: inherit;
          flex-direction: column;
          color: #ffffff;
          text-align: right;

          .deal-right-top {
            justify-content: flex-end;
          }

          .deal-right-img {
            width: 40rpx;
            height: 40rpx;
            margin-right: 10rpx;
          }

          .deal-right-time {
            font-size: 40rpx;
            margin-top: 18rpx;
          }

          .u-button {
            width: 340rpx;
            height: 70rpx;
            line-height: 70rpx;
            font-size: 28rpx;
            border-radius: 36rpx;
            padding: 0;
            color: #ef4a52;
            box-shadow: rgba(#000000, 0.1) 0 12rpx 12rpx -6rpx;
            background: #ffffff;

            .u-button__text {
              display: flex;
              align-items: center;
              justify-content: center;
            }

            img {
              width: 42rpx;
              height: 40rpx;
              margin-right: 10rpx;
            }
          }
        }
      }
    }

    .deal-info-div {
      width: 100%;
      // padding: 0 30rpx;
      font-size: 28rpx;
    }

    // 交易信息
    .deal-info-content {
      color: #282828;
      background: linear-gradient(-90deg, #0179c5 1%, #ffffff 35%);
      background: -moz-linear-gradient(-90deg, #0179c5 1%, #ffffff 35%);
      background: -o-linear-gradient(-90deg, #0179c5 1%, #ffffff 35%);
      background: -webkit-linear-gradient(-90deg, #47b973 10%, #f0f0f0 100%);
      border-radius: 10rpx;
      // box-shadow: rgba(#2760eb, 0.2) 0 6rpx 100rpx;
      margin-bottom: 44rpx;

      // padding:0 30rpx;
      // 宠物信息
      .deal-con-top {
        width: 100%;
        height: 302rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        // background: url("~assets/mine/info-card-bg1.png") no-repeat;
        // background-size: 100% 100%;
        // background: #ffffff;
        z-index: 1;

        .deal-top-pet {
          height: 196rpx;
          padding: 20rpx 30rpx 10rpx;
          color: #ffffff;
          border-bottom: 2rpx solid rgba(#e9e9e9, 1);
          position: relative;

          &::after {
            content: "";
            width: 14rpx;
            height: 14rpx;
            background: #f3f3f8;
            border-radius: 50%;
            position: absolute;
            left: -37rpx;
            bottom: -7rpx;
          }

          &::before {
            content: "";
            width: 14rpx;
            height: 14rpx;
            background: #f3f3f8;
            border-radius: 50%;
            position: absolute;
            right: -37rpx;
            bottom: -7rpx;
          }

          .deal-pet-left {
            justify-content: flex-start;
            align-items: flex-start;
          }

          .deal-pet-img {
            width: auto;
            height: 150rpx;
            margin-right: 28rpx;
            // background: #ffffff;
            // border-radius: 50%;
          }

          .deal-pet-left-info {
            // color: #000000;
            margin-bottom: 22rpx;

            .deal-pet-title {
              font-size: 24rpx;
              line-height: 34rpx;
            }

            .deal-pet-name {
              max-width: 300rpx;
              line-height: 40rpx;
              font-weight: bold;
            }
          }

          .deal-pet-left-info:last-child {
            margin-bottom: 0;
          }

          .deal-pet-right {
            flex-direction: column;
            justify-content: center;

            .pet-right-title {
              // color: #000000;
            }

            .pet-right-price {
              color: #ffffff;
              font-size: 60rpx;
              margin-top: 6rpx;
            }
          }
        }

        // 选择支付方式
        .deal-top-pay {
          height: 104rpx;
          padding: 0 30rpx;
          border-bottom: 2rpx solid rgba(#e9e9e9, 1);

          .deal-top-pay-left {
            justify-content: flex-start;

            .pay-img {
              width: 40rpx;
              height: 40rpx;
              margin-right: 20rpx;
            }
          }

          .deal-top-pay-right {
            justify-content: flex-end;
            font-size: 24rpx;

            .van-icon {
              font-size: 30rpx;
              color: #282828;
              font-weight: bold;
              margin-left: 20rpx;
            }
          }
        }
      }

      // 中间支付信息
      .deal-con-center {
        padding: 32rpx 30rpx;

        // background: #ffffff;
        .deal-center-line {
          color: #212121;
          margin-bottom: 20rpx;
        }

        .vant-btn-copy {
          position: static;
          margin: 0;

          .u-button {
            width: 80rpx;
            height: 42rpx;
            line-height: 42rpx;
            color: #ffffff;
            background: #2760eb;
            border-radius: 4rpx;
            font-size: 24rpx;
            padding: 0;
          }
        }

        .deal-pay-img-div {
          padding: 12rpx 0 0;
          justify-content: center;
        }

        .deal-pay-content {
          width: 372rpx;
          height: 476rpx;
          
          img{
            width: 100%;
          }
        }

        .deal-pay-usdt {
          flex-direction: column;

          .deal-pay-content {
            width: 288rpx;
            height: 288rpx;
            margin-bottom: 16rpx;
            background: #ffffff;
          }

          .usdt-btn {
            width: 250rpx;
            height: 52rpx;
            line-height: 52rpx;
            margin-bottom: 38rpx;
            text-align: center;
            font-size: 24rpx;
            color: #ffffff;
            background: #272727;
            border-radius: 4rpx;
          }

          .usdt-title {
            color: #0f0f0f;
            margin-bottom: 14rpx;
          }

          .usdt-url {
            width: 444rpx;
            color: #949494;
            text-align: center;
            line-height: 34rpx;
            margin-bottom: 18rpx;
          }
        }
      }

      // 底部操作
      .deal-con-btm {
        min-height: 224rpx;
        padding: 0 30rpx 30rpx;
        margin: 0;
        // background: url("~assets/mine/info-card-bg2.png") no-repeat;
        // background-size: 100% 100%;
        // background: #ffffff;
        flex-direction: column;
        position: relative;
        overflow: initial;

        &::after {
          content: "";
          width: 14rpx;
          height: 14rpx;
          background: #f3f3f8;
          border-radius: 50%;
          position: absolute;
          left: -7rpx;
          top: -7rpx;
          z-index: 2;
        }

        &::before {
          content: "";
          width: 14rpx;
          height: 14rpx;
          background: #f3f3f8;
          border-radius: 50%;
          position: absolute;
          right: -7rpx;
          top: -7rpx;
          z-index: 2;
        }

        .deal-tag {
          padding-top: 22rpx;
          color: #989898;
          font-size: 22rpx;
          line-height: 34rpx;
          display: inline-block;
          border-top: 2rpx dashed #e9e9e9;
        }

        .u-button {
          margin-top: 30rpx;
          width: 100%;
          height: 80rpx;
          line-height: 80rpx;
          font-size: 32rpx;
        }

        .u-button-wait {
          background: rgb(143, 208, 168);
        }

        .u-button-ss {
          width: 220rpx;
          color: #ffffff;
          background: #ff4400;
          margin-right: 20rpx;
        }
      }
    }

    // 订单用户信息
    .deal-user-info-div {
      border-radius: 20rpx;
      padding: 24rpx 20rpx;
      margin-top: 20rpx;
      font-size: 24rpx;

      // background: #ffffff;
      .deal-user-line {
        margin-bottom: 18rpx;
      }

      .deal-user-line:last-child {
        margin: 0;
      }

      .deal-user-img {
        width: 40rpx;
        height: 40rpx;
      }

      .deal-user-line-left {
        justify-content: flex-start;

        .deal-user-img {
          margin-right: 14rpx;
        }
      }

      .deal-user-line-right {
        justify-content: flex-end;

        .deal-user-img {
          margin-left: 22rpx;
        }
      }
    }

    // 底部
    .deal-info-btm {
      width: 100%;
      height: 100rpx;
      position: fixed;
      bottom: 0;
      padding: 0 24rpx;
      color: #282828;
      background: #ffffff;
      justify-content: flex-end;
      align-items: center;

      .u-button {
        margin-left: 20rpx;
        height: 80rpx;
        line-height: 80rpx;
      }

      .u-button-upload-p {
        width: 280rpx;
      }

      .u-button-sure {
        width: 190rpx;
      }

      .u-button-no {
        background: #ffd795;
        opacity: 0.8;
      }

      .u-button-ss {
        width: 190rpx;
        color: #ff4400;
        background: #f1f0eb;
      }
    }

    // 上传凭证弹窗
    .upload-popup-div {
      // width: 560rpx;
      padding: 20rpx 20rpx;
      margin: 0 auto;
      text-align: center;
      .camera-btm-div {
        // width: 100%;
        width: 160rpx;
        height: 160rpx;
        margin: 0 auto;
        justify-content: center;
        background: #f2f3f5;

        .pz-img-div {
          width: 100%;
          height: 590rpx;
          border-radius: 4rpx;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: relative;
        }

        .pz-none {
          width: 136rpx;
          height: 136rpx;
        }

        span {
          font-size: 24rpx;
          color: #818090;
        }

        .pz-img {
          position: absolute;
          top: 0;
          left: 0;
        }
      }

      .upload-popup-btn {
        margin: 20rpx 0 30rpx;
        .upload-close {
          width: 238rpx;
          text-align: center;
          color: #ffffff;
          height: 60rpx;
          line-height: 60rpx;
          color: #262626;
          // background: rgba(#31be9f, 0.5);
          border-radius: 10rpx;
        }

        .upload-sure {
          width: 238rpx;
          text-align: center;
          color: #ffffff;
          height: 60rpx;
          line-height: 60rpx;
          // background: #31be9f;
          color: #00a3e8;
          border-radius: 10rpx;
        }
      }
    }

    // 弹出层 选择支付方式
    .popup-div {
      font-size: 28rpx;
      color: #282828;

      .pop-top {
        padding: 20rpx 40rpx 0;
      }

      .pop-close {
        color: #989898;
      }

      .pop-sure {
        color: #31be9f;
      }

      .pop-pay-list {
        padding: 16rpx 20rpx 0;

        .pop-pay-item {
          width: 100%;
          padding: 24rpx 0;
          border-bottom: 2rpx solid #f5f5f5;
        }

        .pop-pay-left {
          justify-content: flex-start;
        }

        .pop-pay-img {
          width: 80rpx;
          height: 80rpx;
          margin-right: 28rpx;
        }

        .pop-active-img {
          color: #31be9f;
          font-size: 40rpx;
        }
      }
    }
  }
</style>

<style lang="less">
  .deal-info {
    .van-uploader__input-wrapper {
      width: 100%;
    }
  }
</style>
